<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一些关于JS的练习</title>
</head>

<style type="text/css">
	.table-box{
		width: 450px;
		min-height:80px;
		max-height: 200px;
		overflow: auto;
		padding: 0 0 10px 0;
	}
	.table-box ul{
		list-style: none;
		padding: 0px;
		margin: 0px;
	}

	 ._item{
	 	width:400px;
	 	height:40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto;
	}

	._item div{
		width: 50%;
		height:100%;
		text-align: center;
		line-height: 40px;
		border-top:1px solid #999;
		font-size: 14px;
	}
	._item div:nth-child(1){
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	}
	._item div:nth-child(2){
	border-right: 1px solid #999;
	}

	._item:last-child{
	border-bottom: 1px solid #999;
	}

	._item input{
		width: 50px;
		height: 20px;
		padding:0px;
		margin: 0 5px;
		text-align: center;
	}

	._btn-box{
		width: 400px;
		height: 50px;
		display:flex;
		justify-content: space-around;
		align-items: center;
		background-color: red;
	}

	._kBtn{
		width: 30%;
		height: 35px;
		line-height:35px;
		border-radius: 5px;
		text-align: center;
		color:#FFF;
		background-color: green;
	}

	iframe{
		width: 800px;height:900px;
	}

</style>
<body>

	<iframe id="iframe" src="https://e.evente.cn/105460"></iframe>

	<button id="_1R">1s刷新一次</button>


<div class="table-box">
    <ul class="_item-box">
        <li class="_item" style="background-color: rgba(242, 242, 242, 1);height: 30px;">
            <div style="border-top:1px solid #999999;color: #999999;line-height: 30px;">梯度项（数量）</div>
            <div style="border-top:1px solid #999999;color: #999999;line-height: 30px;">金额</div>
        </li>
        <li class="_item">
            <div>
                <input type="" name="">
            </div>
            <div>
                <span>提成</span>
                <input type="" name="">
                <span>%</span>
            </div>
        </li>
    </ul>
</div>


<div class="_btn-box">
	<div class="_kBtn addBtn">添加一行</div>
<div class="_kBtn delBtn">删除一行</div>
<div class="_kBtn delBtn">删除一行</div>
</div>




<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

	$('#_1R').on('click',function(){




			window.setInterval(function(){$('#iframe').attr('src','https://e.evente.cn/105460');},1000);

			

	})
	
	$('.addBtn').on('click',function(){

		console.log(1231231);

$('._item-box').append("<li class='_item'><div><input type='text'/></div><div><span>提成</span><input type='text' /><span>%</span></div></li>");

$('.table-box').scrollTop($('.table-box')[0].scrollHeight);



	});


	$('.delBtn').on('click',function(){

		console.log($('._item-box').find('li:last'));

$('._item-box').find('li:last').remove();

	});

	[{id:"271",name:"白酒"},{id:"272",name:"红酒"},{id:"273",name:"洋酒"},{id:"274",name:"啤酒"}]




</script>

<!-- <script src="index.js"></script> -->
<!-- <script src="treeBST.js"></script> -->
<!-- <script src="sortAndSearch.js"></script> -->
<script src="promiseDiy.js"></script>
</body>
</html>